.box{
    width: 500px;
    height: 500px;
    box-sizing: border-box;
    margin: 0px auto;
    margin-top: 100px;

    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-template:
    'A A B'
    'C D B'
    'C E E';
    gap: 16px;
    --deg:360deg;
    --duration:8s;
    animation: rotate var(--duration) linear infinite;
}
.box-item{
    overflow: hidden;
    box-shadow: 0px 0px 4px red;
    outline: 1px solid pink;
    border-radius: 16px;
}
.box-item-banner{
    width: 100%;
    height: 100%;
    --imgSize:240%;
    --imgCenterSize:300%;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: var(--imgSize);
        height: var(--imgSize);
        object-fit: cover;
        --deg:-360deg;
        animation: rotate var(--duration) linear infinite;
    }
}
.box-item:nth-child(1){
    grid-area: A;
}
.box-item:nth-child(2){
    grid-area: B;
}
.box-item:nth-child(3){
    grid-area: C;
}
.box-item:nth-child(4){
    grid-area: D;
    .box-item-banner img{
        width: var(--imgCenterSize);
        height: auto;
    }
}
.box-item:nth-child(5){
    grid-area: E;
}

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(var(--deg));
    }
}